<template>
	<!-- 排房页面 -->
	<view class="container">
		<!-- 顶部信息介绍 -->
		<view class="topBack">
		</view>
		<!-- 排房卡片 -->
		<view class="rowHouseCard">
			<view class="rowHouseCardContant">
				<view class="rowHouseCardTop">
					<u-checkbox-group>
						<u-checkbox @change="checkboxChange" :checked="FormData.checked" />
						房型名称排序
					</u-checkbox-group>
				</view>


				<view class="rowHouseCardCenter" style="margin-top: 20rpx;">
					按状态排序
					<view class="priceSlect list">
						<u-radio-group v-model="FormData.roomType" @change="statusGroupChange">
							<u-radio name="0"> 空房</u-radio>
							<u-radio name="1" :customStyle="{marginLeft:'200rpx'}">满房 </u-radio>
						</u-radio-group>
					</view>
				</view>

				<view class="rowHouseCardCenter" style="margin-top: 20rpx;">
					按价格排序
					<view class="priceSlect list">
						<u-radio-group v-model="FormData.priceType" @change="radioGroupChange">
							<u-radio name="0"> 升序</u-radio>
							<u-radio name="1" :customStyle="{marginLeft:'200rpx'}"> 降序</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		</view>
		<!-- 重置按钮 -->
		<view @click="reset" class="resetContant">
			<!-- #ifdef H5 -->
			<view class="reset">
				<u-button type="info">重置</u-button>
			</view>
			<!-- #endif -->
			<!-- #ifdef  MP-WEIXIN -->
			<view class="reset">
				<u-button type="info">重置</u-button>
			</view>
			<!-- #endif -->
		</view>
		<!-- 确定按钮 -->
		<view class="btn" style="margin: 30rpx 39rpx;">
			<!-- #ifdef H5 -->
			<u-button @click="goIndex" color="#3055C8" style="margin: 500rpx 5rpx;width: 100%;">确定</u-button>
			<!-- #endif -->
			<!-- #ifdef  MP-WEIXIN -->
			<u-button @click="goIndex" color="#3055C8" style="margin: 500rpx 39rpx;width: 90%;">确定</u-button>
			<!-- #endif -->

		</view>

	</view>
</template>

<script>
	import {
		login
	} from '../../api/public';
	export default {
		onShow() {
			const resetData = uni.getStorageSync('storage_key')
			if (resetData) {
				this.FormData = resetData
			} else {
				this.FormData = {
					checked: false, //房型
					priceType: '', //价格
					roomType: '' //状态
				}
			}
		},
		data() {
			return {
				FormData: {
					checked: false,//房型
					priceType: '',//价格
					roomType: '' //状态
				},
				priceType: '',
				roomType: ''
			};
		},
		methods: {
			//清空选择
			reset() {
				this.FormData = {
					checked: false,
					value: '',
					value1: ''
				}
			},
			checkboxChange(e) {
				if (e) {
					this.FormData.checked = true
				} else {
					this.FormData.checked = false
				}
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				this.priceType = e
			},
			// 选中任一radio时，由radio-group触发
			statusGroupChange(e) {
				this.roomType = e
			},
			//跳转到首页并传参
			goIndex() {
				const data1 = {
					checked: this.FormData.checked,
					priceType: this.FormData.priceType,
					roomType: this.FormData.roomType
				}
				uni.setStorageSync('storage_key', data1);
				uni.reLaunch({
					url: '/pages/index/index?checked=' + this.FormData.checked + '&priceType=' + this.FormData
						.priceType +
						'&roomType=' +
						this.FormData.roomType
				})
			}

		}
	}
</script>

<style lang="scss">
	.container {
		box-sizing: border-box;

		//顶部信息
		.topBack {
			width: 100%;
			height: 514rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #f8f8f8;
			background: linear-gradient(to top, #f7f7f7, #3055C8);

			//顶部文字
			.containerText {
				font-size: 30rpx;
				margin-bottom: 310rpx;
			}
		}

		//排房卡片区域
		.rowHouseCard {
			width: 100%;
			position: relative;
			display: flex;
			justify-content: center;

			.rowHouseCardContant {
				width: 90%;
				height: 800rpx;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 0 30rpx;
				position: absolute;
				bottom: -400rpx;

				.rowHouseCardTop {
					width: 100%;
					height: 150rpx;
					border-bottom: 1rpx solid #f3f3f3;
					display: flex;
					align-items: center;
				}

				.rowHouseCardCenter {
					width: 100%;
					height: 150rpx;
					border-bottom: 1rpx solid #f3f3f3;

					.priceSlect {
						width: 100%;
						margin: 45rpx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}


			}

		}

		.resetContant {
			width: 100%;
			height: 70rpx;
			margin-top: 450rpx;
			display: flex;
			justify-content: center;

			.reset {
				width: 90%;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				border-radius: 10rpx;
				color: #fff;
				background-color: #3055c8;
			}
		}


	}
</style>